<template>
  <div class="bottom">
    <!-- tabbar -->
    <van-tabbar>
      <van-tabbar-item icon="home-o" @click="getId(0)" :class="{default :tabid==0 }" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" @click="getId(1)" :class="{default :tabid==1}" to="/category">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" @click="getId(2)" :class="{default :tabid==2 }" to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="getId(3)" :class="{default :tabid==3}" to="/center" info=20>我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "Bottom",
  data() {
    return {
      tarlist: [
        { id: 0, icon: "home-o", path: "/", name: "首页" },
        { id: 1, icon: "apps-o", path: "/category", name: "分类" },
        { id: 2, icon: "shopping-cart-o", path: "/cart", name: "购物车" },
        { id: 3, icon: "user-o", path: "/center", name: "我的" },
      ],

    };
  },

  watch: {},

  methods: {
    ...mapMutations("tabbar", ["tabId"]),
    getId(id) {
      this.tabId(id);
      id==0?this.$router.push('/'):'';
    },

    getTab() {},
  },

  computed: {
    ...mapState("tabbar", ["tabid"]),
  },
  mounted() {},
  created() {},
};
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.default{
 color: deepskyblue !important;
}

.van-tabbar-item{
  color: gray;
}
</style>
